<template>
	<view class="projectDetail">
		<topNav rightText="竞价排行榜" @rightBtn="doJJranks">
			<template slot="middle">
				<text>项目详情</text>
			</template>
		</topNav>
		<view class="detail_li">
			<view class="overfont-2 d_l_tit bold">
				{{itemDeteils.itemName}}
			</view>
			<view class="flex" style="margin-bottom: 20rpx;">
				<view
					class="t_t_btn"
					v-for="(item,index) in itemDeteils.itemTagType" :key="index"
				>{{$getDict(item_tag_type,item)}}</view>
			</view>
			<view class="flex f_align f_align_center fb_user_info" >
				<view class="flex">
					<view class="fb_user_head">
						<image class="autoImg" :src="itemDeteils.userHeadUrl" mode=""></image>
					</view>
					<view class="flex f_column f_align">
						<view class="bold">{{itemDeteils.userName}}</view>
						<view class="fb_time">{{itemDeteils.createTime}}</view>
					</view>
				</view>
				<view class="gz_pro_btn" @click="concernItem">
					{{itemDeteils.isConcern == '1' ?'关注项目' : '已关注'}}
				</view>
			</view>
			<view class="fb_pro_handle flex f_align f_align_center">
				<view class="bold">
					浏览数：<text class="tip">{{itemDeteils.viewCount}}</text>
				</view>
				<view class="bold">
					点赞数：<text class="tip">{{itemDeteils.likeCount}}</text>
				</view>
				<view class="bold">
					关注数：<text class="tip">{{itemDeteils.concernCount}}</text>
				</view>
			</view>

			<view class="text_w">
				{{itemDeteils.itemDetail}}
			</view>


			<view class="flex f_warp">
				<view
					class="detail_image"
					v-for="(item,index) in itemDeteils.detailImgList"
					:key="index"
					@click="$wathcImg(itemDeteils.detailImgList,index)"
				>
					<image class="autoImg" :src="item" mode=""></image>
				</view>
			</view>

			<view class="biding_btn bold" @click="doJJranks">
				我要竞价
			</view>
		</view>
		<view class="b_b_fixed flex f_align f_align_center">
			<view @click="$navTo(`../share/shareItem?itemId=${itemId}`)" class="b_b_item">
				<i class="iconfont iconzu5470"></i>
				<text>分享</text>
			</view>
			<view @click="concernItem" :class=" itemDeteils.isConcern == '0' ? 'b_b_item active' : 'b_b_item'">
				<i class="iconfont iconzu5502"></i>
				<text>关注</text>
			</view>
			<view @click="likeItem" :class=" itemDeteils.isLike == '0' ? 'b_b_item active' : 'b_b_item'">
				<i class="iconfont iconzu5469"></i>
				<text>点赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				list:[],
				itemId:'',
				itemDeteils:{
					itemName:'',
					itemDetail:'',
					createTime:'',

					viewCount:1,
					likeCount:0,
					concernCount:0,
					detailImgList:[],
					isLike:'1',
					isConcern:'1',
					itemTagType:[]
				}
			};
		},
		onLoad(option) {
			if(option){
				this.itemId = option.itemId;
			}
			this.$store.dispatch('getDictlists','item_tag_type');
		},
		computed:{
			...mapState({
				item_tag_type:state => state.dictArrs.item_tag_type
			})
		},
		onShow() {
			this.getItemDetails();
		},
		methods:{
			doJJranks(){
				const _this = this;
				_this.$loginAuth();
				this.$navTo(`../jjRank/jjRank?itemId=${_this.itemId}&userId=${_this.itemDeteils.userId}`);
			},
			//详情哦
			async getItemDetails(){
				const _this = this;
				let res = (await _this.$http('/api/auth/item/getUserItem','POST',_this.itemId)).data;
				console.log(res);
				if(res && res.code == '0'){
					let datas =  res.data;
					datas.itemTagType = datas.itemTagType ? datas.itemTagType.split(',') : [];
					_this.itemDeteils = datas;
					console.log(datas);
				}
			},
			//关注 取消关注
			async concernItem(){
				const _this = this;
				let res = (await _this.$http('/api/auth/item/concernItem','POST',_this.itemId)).data;
				if(res && res.code == '0'){
					_this.$showToast(_this.itemDeteils.isConcern == '1' ? '关注成功' : '取消关注成功');
					if(_this.itemDeteils.isConcern == '1'){
						_this.itemDeteils.isConcern = '0';
						_this.itemDeteils.concernCount += 1;
					}else{
						_this.itemDeteils.isConcern = '1';
						_this.itemDeteils.concernCount -= 1;
					}
				}else{
					_this.$showToast(res.msg);
				}
			},
			//喜欢 点赞
			async likeItem(){
				const _this = this;
				let res = (await _this.$http('/api/auth/item/likeItem','POST',_this.itemId)).data;
				if(res && res.code == '0'){
					_this.$showToast(_this.itemDeteils.isLike == '1' ? '点赞成功' : '取消点赞成功');
					if(_this.itemDeteils.isLike == '1'){
						_this.itemDeteils.isLike = '0';
						_this.itemDeteils.likeCount += 1;
					}else{
						_this.itemDeteils.isLike = '1';
						_this.itemDeteils.likeCount -= 1;
					}
				}else{
					_this.$showToast(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.projectDetail{
		width: 100%;
		.detail_li{
			padding: 30rpx 24rpx 160rpx;
			font-size: 28rpx;
			color: #333;
			.d_l_tit{
				font-size: 36rpx;
				color: #1A1A1A;
				margin-bottom: 18rpx;
			}
			.text_w{
				text-indent: 48rpx;
			}
			.fb_user_info{
				padding: 20rpx 0;
				position: sticky;
				top: calc(var(--status-bar-height) + 88rpx);
				background-color: #fff;
				.fb_user_head{
					width: 72rpx;height: 72rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					image{border-radius: 50%;}
				}
				.fb_time{font-size: 22rpx;}
				.gz_pro_btn{
					color: #fff;
					@include flex_center;
					background-color: $ych_color;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
				}
			}
			.fb_pro_handle{
				padding: 12rpx 0 40rpx;
				color: #111A2B;
				font-size: 24rpx;
				.tip{
					color: #AFB2B8;
					font-weight: normal;
				}
			}
			.t_t_btn{
				padding: 0 8rpx;
				font-size: 22rpx;
				color: #0984FF;
				margin-right: 24rpx;
				border: solid 1rpx #0984FF;
				border-radius: 4rpx;
				@include flex_center;
			}


			.detail_image{
				width: 33.33%;
				margin-top: 24rpx;
				.autoImg{
					width: 218rpx;height: 218rpx;
				}
			}
			.biding_btn{
				width: 606rpx;
				height: 88rpx;
				background-color: $ych_color;
				border-radius: 12rpx;
				font-size: 30rpx;
				color: #fff;
				@include flex_center;
				margin:107rpx auto;
				@include box_shadow_btn;
			}
		}
		.b_b_fixed{
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			padding: 0 83rpx;
			background-color: #fff;
			font-size: 30rpx;
			color: #1A1A1A;
			border-top: solid 1rpx #E6E6E6;
			position: fixed;
			bottom: 0;
			.b_b_item{
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 40rpx;
					margin-right: 6rpx;
				}
				&.active{
					color: #F74E45;
					.iconfont{color: #F74E45;}
				}
			}
		}
	}
</style>
